import usePanelLayer from '@/hooks/usePanelLayer';
import { defineStore } from 'pinia';
import { useEditorStore } from './editor';

export const usePanelStore = defineStore('panel', () => {
  const sidebar1 = ref(''); // 选中的siderbar-上方
  const sidebar2 = ref(''); // 选中的siderbar-下方
  const rightVisible = ref(false); // 右侧面板可见性
  const canvasConfig = ref({ width: 1920, height: 1080 }); // 页面设置
  const draggingElement = ref<any>(null); // 正在推拽的元素

  const editorStore = useEditorStore();
  const { layers, layerId, layerData, addLayer, removeLayer, updateLayer } = usePanelLayer();

  // 初始化
  const init = () => {
    try {
      // 从json中解析图层数据
      const configJson = JSON.parse(editorStore.sceneDetail.configJson);
      layers.value = configJson.panel?.layers || [];
    } catch (error) {
      console.log(error);
    }
  };

  return {
    sidebar1,
    sidebar2,
    rightVisible,
    canvasConfig,
    draggingElement,
    layers,
    layerId,
    layerData,
    init,
    addLayer,
    removeLayer,
    updateLayer,
  };
});
